<template>
    <div class="flex_col_start m5 p10 card" style="width: 400px;">
        <div class="flex_row_center">
            <label>ID:</label>
            <label class="ml5">{{ props.proj.id }}</label>
        </div>
        <div class="flex_row_center mt5">
            <label>名称:</label>
            <label class="ml5">{{ props.proj.name }}</label>
        </div>
        <div class="flex_row_center mt5">
            <label>版本:</label>
            <label class="ml5">{{ props.proj.version }}</label>
        </div>
        <div class="flex_row_center mt5">
            <label>描述:</label>
            <label class="ml5">{{ props.proj.description }}</label>
        </div>
        <div class="flex_row_center mt5">
            <el-button @click="onClickDelete" type="warning">删除</el-button>
            <el-button @click="onClickDetail" type="primary">详情</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { TbProj } from '@/service/proj';

interface Props {
    proj: TbProj
}

const emit = defineEmits<{
    delete: [],
    detail: [],
}>();

const props = defineProps<Props>();

async function onClickDelete() {
    emit('delete');
}

function onClickDetail() {
    emit('detail');
}

</script>
